import * as turf from "@turf/turf";
import { Map } from "mapbox-gl";
import Base from "./Base";
import { getMask } from "../utils/index";
import { ILayerProps } from "src/types/index";

export default class AreaMask extends Base {
  layerId: string;
  layerIdLine: string;
  constructor(map: Map, layerProps: ILayerProps) {
    // 资源名称
    let SOURCE_NAME = "AreaMask";

    super(map, layerProps, SOURCE_NAME);
    
    this.layerId = this.getLayerName("default")
    this.layerIdLine = this.getLayerName("line");

    this.init();
  }

  init() {
    this.map.addSource(this.sourceId, {
      type: "geojson",
      data: turf.featureCollection(this.features) as any,
    });

    this.map.addLayer({
      id: this.layerIdLine,
      type: "line",
      source: this.sourceId,
      layout: {
        "line-join": "round",
        "line-cap": "square",
      },
      paint: {
        "line-color": "rgba(0,200,255,1)",
        "line-opacity": 1,
        "line-width": 5,
        "line-blur": 1,
        "line-dasharray": [4, 3],
      },
    });

    this.map.addLayer({
      id: this.layerId,
      // maxzoom: 13,
      type: "fill",
      source: this.sourceId,
      paint: {
        "fill-color": "rgba(15, 54, 72, 0.6)",
        "fill-outline-color": "white",
      },
    });
  }

  setFeatures(geometry: any, properties = {}, cb: (v?: any) => any) {
    const Features = getMask(geometry);
    Features.properties = {
      ...Features.properties,
      ...properties,
    };
    this.updateFeatures([Features], cb);
  }
}

